<script setup lang="ts">
import { computed } from "vue";

interface Props {
	name?: any;
	size?: number | string;
	text?: string;
	iconfont?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
	name: "",
	size: 16,
	text: "",
	iconfont: false
});

const checkHave = computed(() => {
	return !props.text || props.text === "";
});
</script>

<template>
	<el-tooltip class="box-item" effect="dark" :content="props.text" :disabled="checkHave">
		<div class="icon-container" v-bind="$attrs">
			<!-- 阿里云的 iconfont 字体图标 -->
			<template v-if="props.iconfont">
				<i :class="['iconfont', props.name]"></i>
			</template>

			<!-- elementplus icon -->
			<template v-else>
				<el-icon :size="props.size">
					<component :is="props.name"></component>
				</el-icon>
			</template>
		</div>
	</el-tooltip>
</template>

<style lang="scss" scoped>
.icon-container {
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
</style>
